import React, { useState, useEffect } from 'react';
import { Modal, Button, Skeleton, Image, message, Upload, Row, Col } from 'antd'
import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { ProFormText, ProForm, ProFormDatePicker, ProFormDateTimePicker, ProFormSelect, ProFormTextArea, ProFormUploadButton } from '@ant-design/pro-components';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { information } from '@/utils/rules';
import Utils from 'fr-util/utils';
import type { EditModalProps } from '../data';

import { reqAddActPrize, reqUpdateActPrize } from '@/services/basicConsultation';

const EditModal: React.FC<EditModalProps> = ({ row, isOpen, activeKey, handleModal, actionRef }) => {
  const title = '脉诊标定';
  const [formObj] = ProForm.useForm()
  const [initialValues, setinitialValues] = useState<any>(null)
  const handleAdd = async (params: any) => {
    const res = await reqAddActPrize({ type: activeKey, ...params })
    if (res.code == 200) {
      message.success(res?.message)
      actionRef?.current.reload()
      handleModal(false)
    } else {
      message.error(res?.message)
    }
  }

  const handleEditor = async (params: any) => {
    const res = await reqUpdateActPrize({ type: activeKey, ...params, id: row?.id })
    if (res.code == 200) {
      message.success(res?.message)
      actionRef?.current.reload()
      handleModal(false)
    } else {
      message.error(res?.message)
    }
  }

  useEffect(() => {
    if (row?.id) {
      let { id, phoneNumber, winningLevel, winningPrize, redeemCode, status, actId } = row

      setinitialValues({
        id, phoneNumber, winningLevel, winningPrize, redeemCode, status, actId
      })
    }
    setWinningLevelData([{ value: 1, label: '一等奖', }, { value: 2, label: '二等奖', }, { value: 3, label: '三等奖', },]);
    setStatusData([{ value: 0, label: '待开奖', }, { value: 1, label: '待核销', }, { value: 2, label: '已核销', },]);

    //handleActIdData({});
  }, [])

  const [winningLevelData, setWinningLevelData] = useState<any>();
  const [statusData, setStatusData] = useState<any>();
  const [actIdData, setActIdData] = useState<any>();

  // const handleActIdData = async(params: any) =>{
  // 	const res = await reqActList({ });
  // 	if (res.code == 200){
  // 		const selectData = toSelected(res?.data?.list);
  // 		setActIdData(selectData);
  // 	}
  // }
  const getBase64 = (img: RcFile, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
  }
  const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  }
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>上传</div>
    </div>
  );

  const valueChanage = (value: any) => {
    if (value?.winningLevel) {
      if (value?.winningLevel == 1) {
        formObj.setFieldValue("winningPrize", "圈厨电热水壶1.5L");
      } else if (value?.winningLevel == 2) {
        formObj.setFieldValue("winningPrize", "Jeko&Jeko弹盖式运动水杯");
      } else if (value?.winningLevel == 3) {
        formObj.setFieldValue("winningPrize", "1拖3数据线");
      }
    }
  }

  return (
    <Modal width={1000} title={title} open={isOpen} onCancel={() => handleModal(false)} footer={null} destroyOnClose={true}>
      {
        initialValues === null && row?.id ? <Skeleton active paragraph={{ rows: 6 }} /> :
          <ProForm
            form={formObj}
            initialValues={initialValues}
            onValuesChange={valueChanage}
            onFinish={(values): Promise<any> => row?.id ? handleEditor(values) : handleAdd(values)}>
            <Row gutter={25}>
              <Col span={0}><ProFormText name="id" label="ID" hidden placeholder="请输入ID" /></Col>
              <Col span={8}><ProFormText name="phoneNumber" label="中奖手机号" placeholder="请输入中奖手机号" /></Col>
              <Col span={8}><ProFormSelect options={winningLevelData} name="winningLevel" width="md" label="中奖等级:" /></Col>
              <Col span={8}><ProFormText name="winningPrize" label="奖品" placeholder="请输入奖品" /></Col>
              <Col span={8}><ProFormText name="redeemCode" label="核销码" placeholder="请输入核销码" /></Col>
              <Col span={8}><ProFormSelect options={statusData} name="status" width="md" label="状态:" /></Col>
              {/* <Col span={8}><ProFormSelect options={actIdData} name="actId" width="md" label="" /></Col> */}
            </Row>
          </ProForm>
      }
    </Modal >
  );
};
export { EditModal }

